<template>
  <!-- 添加搜索文本框 -->
  <div>
    <input type="search" name="" id="" placeholder="请输入城市名称" v-model="city">
    <button @click="request">搜索</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { CitySearch } from '../api/weatherAPI';
// 引入状态管理
import { useCityStore } from '../stores/cityStore';

export default {
  setup() {
    const city = ref('');
    const cityStore = useCityStore();

    async function getData(cityName) {
      const res = await CitySearch(cityName);
      // console.log(res);
      // console.log(cityStore.location)
      cityStore.updateLocation(res.location[0]);
      // console.log(cityStore.location)
    }

    function request() {
      getData(city.value);
    }

    return {
      city,
      request
    };
  }
};
</script>

<style>
input {
  padding: 12px 16px;
  margin-right: 12px;
  border: 1px solid #ccc;
  border-radius: 24px;
  font-size: 16px;
  outline: none;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

input:focus {
  border-color: #4a90e2;
  box-shadow: 0 2px 8px rgba(74,144,226,0.2);
}

button {
  padding: 12px 24px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

button:hover {
  background-color: #3a7bc8;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>